<template>
  <div class="cart">
    <my-header :leftEit="true">
      <template #left>
        <span style="color: red" @click="isEit=!isEit"> {{isEit?'编辑':'完成'}} </span>
      </template>
      购物车
    </my-header>
    <div class="count">
      <section v-if="cartList.length && token">
        <van-swipe-cell v-for="(item, index) in cartList" :key="index">
          <van-checkbox
            v-model="item.checked"
            checked-color="#ee0a24"
            @change="oneCheck"
          ></van-checkbox>
          <van-card :thumb="item.src">
            <template #tags>
              <p>{{ item.name }}</p>
              <span class="cart_ct">{{ item.up }} {{ item.btm }}</span>
              <section class="cart_ft">
                <span>￥{{ item.price }}</span>
                <van-stepper v-model="item.number" />
              </section>
            </template>
          </van-card>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </section>
      <img v-else src="../../assets/img/dp.png" alt="" />
      <h5>猜你喜欢</h5>
      <ul>
        <li v-for="(item, index) in loveList" :key="index">
          <people-cart :objItem="item">
            已售{{ item.numberOrders }}
          </people-cart>
        </li>
      </ul>
    </div>
    <van-submit-bar v-if="cartList.length && token" :price="allPrice" :button-text="isEit?'提交订单':'删除订单'" @submit="onSubmit">
      <van-checkbox v-model="checkAll" @click="checkall">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import { reactive, toRefs, computed } from "vue";
import { getGoods } from "../../api/home/home";
import myHeader from "../../components/myHeader.vue";
import PeopleCart from "../../components/peopleCart.vue";
import { useStore } from "vuex";
export default {
  components: { myHeader, PeopleCart },
  setup() {
    const store = useStore();
    const data = reactive({
      loveList: [], // 猜你喜欢的数据
      cartList: computed(() => store.state.cartList),
      checkAll: store.state.cartList.every(item => item.checked),
      isEit: true, // 是否是编辑状态
      allPrice: computed(() => {
        let num = 0;
        store.state.cartList.forEach(item => {
          if (item.checked){
             num+= item.price*item.number
          }
        })
        return num*100;
      }),
      token: computed(() => localStorage.getItem('token'))
    });
    getGoods().then((res) => {
      // console.log(res);
      let num = res.data.length - 4;
      // Math.random(); (0-1) 随机数
      let number = parseInt(Math.random() * num);
      // console.log(number);
      data.loveList = res.data.splice(number, 4);
    });
    
    const checkall = () => { // 全选的事件
        // console.log(data.checkAll);
        store.state.cartList.forEach(item => {
          item.checked = data.checkAll
        })
        store.commit('storeAll')
    }
    
    const oneCheck = () => { // 反选的事件
      data.checkAll = store.state.cartList.every(item => item.checked)
      store.commit('storeAll')
    }
    const onSubmit = () => {
       console.log('订单提交了');
    }

    return {
      ...toRefs(data),
      onSubmit,
      checkall,
      oneCheck
    };
  },
};
</script>
<style lang="scss" scoped>
.cart {
  height: 100%;
  .count {
    height: calc(100% - 300px);
    overflow-y: auto;
    img {
      width: 100%;
    }
    h5 {
      line-height: 90px;
      text-align: center;
      font-size: 32px;
    }
    ul {
      display: flex;
      padding: 0 20px;
      flex-wrap: wrap;
      justify-content: space-between;
      li {
        width: 50%;
      }
    }
  }
}
section {
  background: #fff;
}
:deep(.van-swipe-cell__wrapper) {
  display: flex;
  font-size: 32px;
  padding-left: 20px;
  .van-card {
    flex: 1;
    background: #fff;
  }
  .van-button {
    height: 100%;
  }
}
.cart_ct {
  margin: 20px 0;
  display: block;
  color: #b2b2b2;
}
.cart_ft {
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    color: red;
  }
}
:deep(.van-submit-bar){
   bottom: 100px;
}
</style>